<template>
	<view class="content">
		<u-navbar :title="data.item ? '编辑常用语' : '添加常用语'"></u-navbar>
		<view class="content_main">
			<u-input type="textarea" :adjust-position="false" maxlength="100" height="600" v-model="data.value"></u-input>
			<view class="u-flex u-row-right">
				<text>{{data.currentWordNumber}}</text>/100
			</view>
		</view>

		<u-bottom-button confirmText="完成" @confirm="$u.throttle(confirm, 2000)"></u-bottom-button>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		watch
	} from "vue";
	import {
		useUserIm
	} from '/stores/userIm.js'
	const IM = useUserIm()
	const data = reactive({
		item: '',
		value: '',
		currentWordNumber:0
	})
	onLoad(({
		item
	}) => {
		data.item = JSON.parse(item)
		if (data.item != null) {
			data.value = data.item.content
		}
	})
	watch(() => data.value, (n) => {
		if (n.length >= 100) {
			data.value = data.value.substr(0, 100)
			data.currentWordNumber = 100
		} else {
			data.currentWordNumber = n.length
		}
	}, {
		deep: true
	})
	// 添加/修改常用语
	const confirm = async () => {
		if(uni.$u.test.isEmpty(data.value))return uni.$u.toast("内容不能为空")
		if (data.item != null) {
			let params = {
				token: IM.imToken,
				id: data.item.id,
				content: data.value
			}
			let res = await uni.$u.api.getPhraseEdit(params)
			uni.$u.toast('修改成功')
		} else {
			let params = {
				token: IM.imToken,
				content: data.value
			}
			let res = await uni.$u.api.getPhraseAdd(params)
			uni.$u.toast('添加成功')
		}
		setTimeout(() => {
			uni.$u.route({
				type: 'back'
			})
		}, 800)
		// 		getPhraseEdit
		// getPhraseAdd
	}
</script>

<style scoped lang="scss">
	.content {
		&_main {
			padding: 30rpx 60rpx;
			font-size: 28rpx;

			text {
				color: #00D075;
			}
		}
	}
</style>